
<template>
  <div class="main_box">
    <div class="main_box_son">
      <div class="title">真实组合</div>
      <div class="divheight10"/>
      <div class="audit_first">
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="6">
            <div class="grid-content bg-purple displayib">
              <el-input v-model="search1" placeholder="请输入关键字，多项用“，”隔开" @input="serchChange"/>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="gjsx" style="color:#1A8FFE;" @click="showText = !showText">高级筛选
              <span :class="showText?'el-icon-arrow-up rotate1':'el-icon-arrow-up rotate'"/>
            </div>
          </el-col>
          <el-col :span="12"/>
          <el-col :span="1.5">
            <el-button class="width100" @click="dialogVisible = true">启用</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button class="width100" @click="dialogVisible = true">禁用</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button class="width100" @click="dialogFormVisible = true">新增</el-button>
          </el-col>
          <el-dialog :visible.sync="dialogFormVisible" title="新增真实组合">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-width="formLabelWidth" class="demo-ruleForm">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="组合代码" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="组合名称" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="组合成立日期" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="组合截止日期" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="变动日期 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="币种 " prop="name">
                    <el-select v-model="currVal" placeholder="请选择">
                      <el-option
                        v-for="item in currency"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                    <!-- <el-input v-model="ruleForm.name"/> -->
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="投资管理人 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="投资托管人 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="运行方式 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="管理方式 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="募集方式 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="受托职责 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="产品类型 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否分级产品 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否收益权转让产品 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否货币市场基金 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="估值方式" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="募集开始日期 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="募集结束日期 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预计组合结束日期 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否启用 " prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!-- <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"/>
                  </el-form-item> -->
                </el-col>
              </el-row>

              <el-form-item label="备注" prop="desc">
                <el-input v-model="ruleForm.desc" type="textarea"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">取消</el-button>
                <el-button @click="resetForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div> -->
          </el-dialog>
          <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
            <span>
              启用或者禁用
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="lgnoreMistakes">确 定</el-button>
            </span>
          </el-dialog>
        </el-row>
        <el-collapse-transition>
          <div v-show="showText" class="bgg transition-box">
            <el-row :gutter="100" type="flex" justify="space-between">
              <el-col :span="14">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">组合起止日期</span>
                    <el-date-picker/> - <el-date-picker/>
                  </template>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="40" type="flex" class="btnpr" justify="end">
              <el-col :span="6" class="btn2_c">
                <el-button class="btn" type="primary" size="medium ">查询</el-button>
                <el-button class="btn" type="success" size="medium ">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </div>
      <template>
        <el-table :data="trueComTable" style="width: 100%">
          <el-table-column fixed align="center" type="selection" width="50"/>
          <el-table-column
            fixed
            type="index"
            width="50"
            label="序号"
            align="center"/>
          <el-table-column
            width="150"
            fixed
            type="index"
            label="组合代码"
            align="center"/>
          <el-table-column
            width="150"
            fixed
            type="index"
            label="组合名称"
            align="center"/>
          <el-table-column
            v-for="(item,index) in tableHead"
            :label="item.label"
            :property="item.property"
            :key="index"
            width="150"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <el-button type="text" size="small">禁用</el-button>
            </template>
        </el-table-column></el-table>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currVal: '', // 选中币种胡值
      currency: [
        { value: 'CNY', label: '人民币' },
        { value: 'USD', label: '美元' },
        { value: 'GBP', label: '英镑' },
        { value: 'AUD', label: '澳元' }
      ], // 币种
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      tableHead: [
        {
          prop: 'name',
          label: '组合成立日期',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '组合截止日期',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '变动日期',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '币种',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '投资管理人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '投资托管人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '运行方式',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '管理方式',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '募集方式',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '受托职责',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '产品类型',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '是否分级产品',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '是否收益权转让产品',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '是否货币市场基金',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '估值方式',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '募集开始日期',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '预计组合结束日期',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '是否启用',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '备注',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '创建人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '创建时间',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '修改人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '修改时间',
          align: 'left',
          width: 10
        }

      ],
      trueComTable: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        }
      ],
      filterText: '',
      formLabelWidth: '150px',
      search1: '',
      showText: false,
      form: {
        name: '',
        regionStart: '',
        regionEnd: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogVisible: false,
      dialogFormVisible: false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    lgnoreMistakes() {
      this.dialogVisible = false
      // alert('已忽略错误，导入成功')
    },
    serchChange(e) {
      this.search = e
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '../../assets/common';

.title {
  width: 100%;
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}

.audit_first {
  padding: 20px 0;
}

.audit_first_span {
  font-size: 14px;
  padding-right: 20px;
  color: $colorbluedark;
}

.claswithwn {
  width: 50%;
  margin-top: 20px;
}

.el-pagination {
  margin: 20px 0;
}

.btn {
  height: 100%;
  display: inline-block;
}

.btnpr {
  padding-right: 40px;
}

.wn1 {
  padding-right: 20px;
}

.btn2_c {
  text-align: center;
  margin-top: 20px;
}

div.gjsx {
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
}

.displayib {
  display: inline-block;
  width: 100%;
}

.bgg {
  background: #fbfbfb;
  padding: 10px 0;
  margin-top: 10px;
}

.rotate {
  transform-origin: center center; // 旋转中心要是正中间 才行
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: transform 0.2s; // 过度时间 可调
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.rotate1 {
  transform-origin: center center;
  transform: rotate(0deg); // 返回原点
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.baobiao_tab {
  height: 300px;

  .progress-item {
    padding-top: 20px;
  }
}

.baobiao_tab1 {
  height: 373px;
}

div.el-progress-bar__outer {
  height: 14px !important;
}

.circle {
  margin: 0 auto;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 5px $colorbluedark;
  position: relative;
}

.circle_son {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: $colorbluedark;
  border-radius: 50%;
}

span>.circle_span {
  color: #fff;
  line-height: 50px;
}

.bbsc {
  margin: 0 auto;
  width: 80px;
  margin-top: 50px;

  p {
    text-align: center;
    line-height: 20px;
  }
}

.margint40 {
  margin-top: 40px;
}

.wunai {
}
</style>
